<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script src="../js/Myjs.js"></script>
 </head>
 <body>
  <div id="box" style="width:800px;height:700px;box-shadow:1px 1px 5px #ccc;border:1px solid #ccc;border-radius:5px;"></div>
    <div id="box1" style="width:800px;height:900px;box-shadow:1px 1px 5px #ccc;border:1px solid #ccc;border-radius:5px;"></div>
  <script>
   /**
	*方法: panit_svg1(date,width,height,cx,cy,r,colors,labels,rx,ry)
	*用途：用于绘制圆形统计图在标签后加上了百分比
	*参数：date： 
	*      width：height：面板大小
	*      cx：  cy：    重点所在处    r： 统计图半径
	*      colors：   
	*      labels：    
	*      rx： ry：  起始位置
	*特殊情况1:  #ffefdd #c8adf8 #faed94 #fb9984 #8b88fb #bcf881 #a2a2a2
	*/
   function panit_svg1(date,width,height,cx,cy,r,colors,labels,rx,ry){
	  var svgns = "http://www.w3.org/2000/svg";
      var e=document.createElementNS(svgns,"svg:svg");
	  e.setAttribute("width",width);
	  e.setAttribute("height",height);
	  e.setAttribute("viewBox","0 0 "+width+" "+height);
	  //记录date的总值
	  var total=0;
	  for(var i=0; i < date.length; i++)total=total+date[i];

	  //计算各个块区所占的度
	  var angle=[] //定义一个空数组
	  var percent=[]
	  for (var i=0; i < date.length; i++) 
	   {
		   angle[i]=date[i]/total*Math.PI*2;
		   percent[i]=(date[i]/total).toFixed(2);
	   }
	  
	  //遍历每一个区块
	  var startangle = 0;  //初始度数
	  for(var i=0; i < date.length;i++){
         var endangle = startangle+angle[i];//结尾的度数
		 //计算起始和结尾两点的坐标
		 var x1=cx+Math.sin(startangle)*r;
		 var y1=cy-Math.cos(startangle)*r;
		 var x2=cx+Math.sin(endangle)*r;
		 var y2=cy-Math.cos(endangle)*r;
		 //使用svg：path绘制区块
		 var path=document.createElementNS(svgns,"path");
         var big=0;
		 if((endangle-startangle)>Math.PI) big=1;
		 //编辑路径信息
		 var d = "M " + cx + "," + cy +  //圆心
		      " L " + x1 + "," +y1 +
			  " A " + r + "," + r +
			  " 0 " + big + "1" +
			  x2 + "," + y2 +
			  " Z";
		//设置属性
		path.setAttribute("stroke-width","1");
		path.setAttribute("d",d);
		path.setAttribute("fill",colors[i]);
        path.setAttribute("stroke","black");
		e.appendChild(path);

		//设置下一个开始的起始角度
		startangle=endangle;

		//绘制区块图例名称
        var ico=document.createElementNS(svgns,"rect");
		ico.setAttribute("x",rx);
		ico.setAttribute("y",ry+30*i);
		ico.setAttribute("width",20);
		ico.setAttribute("height",20);
		ico.setAttribute("fill",colors[i]);
		ico.setAttribute("stroke","black");
		ico.setAttribute("stroke-width","2");
		e.appendChild(ico);

		//在区块图例右边添加标签
		var label=document.createElementNS(svgns,"text");
		label.setAttribute("x",rx + 30);
		label.setAttribute("y",ry + i*30+18);
		label.setAttribute("font-size","16");
		label.setAttribute("font-family","sans-serif");
		label.appendChild(document.createTextNode(labels[i]+" "+percent[i]*100+"%"));  //添加一个文本节点
		e.appendChild(label);
	  }
	  return e;
   }
   var date=[578,588,598,432,90]
   var labels=new Array("苹果","小米","华为","oppo","htc");
   var colors=new Array("#ffefdd","#c8adf8","#faed94","#fb9984","#a2a2a2");
   //panit_svg1(date,width,height,cx,cy,r,colors,labels,rx,ry)
   _("box").appendChild(panit_svg1(date,700,700,300,300,150,colors,labels,500,100)
   );
   /*
     手机价位1000以下
	 var date=[578,588,598,432]
	 var labels=new Array("1000元以下","1000-2000元","2000-4000元","4000元以上");
     var colors=new Array("red","blue","#f90","#3f0");
   */
   _("box1").appendChild(panit_svg1(date,700,700,300,300,150,colors,labels,500,100)
   );
    /*
     您所使用手机的满意度的方面是？
	 var date=[578,588,598,432,333]
	 var labels=new Array("外观","功能","性能","品牌知名度");
     var colors=new Array("red","blue","#f90","#3f0","");
	 _("box1").appendChild(panit_svg1(date,700,700,300,300,150,colors,labels,500,100)
   );

   */
       /*
     下次选手机会选什么品牌。
	 var date=[578,588,598,432,333]
	 var labels=new Array("外观","功能","性能","品牌知名度");
     var colors=new Array("red","blue","#f90","#3f0","");
	 _("box1").appendChild(panit_svg1(date,700,700,300,300,150,colors,labels,500,100)
   );

   */
       /*
     下次选手机会选什么品牌。
	 var date=[578,588,598,432,333]
	 var labels=new Array("外观","功能","性能","品牌知名度");
     var colors=new Array("red","blue","#f90","#3f0","");
	 _("box1").appendChild(panit_svg1(date,700,700,300,300,150,colors,labels,500,100)
   );

   */
       /*
     每月生活费。
	 var date=[578,588,598,432]
	 var labels=new Array("1000元以下","1000-2000元","2000-3000","3000以上");
     var colors=new Array("red","blue","#f90","#3f0");
	 _("box1").appendChild(panit_svg1(date,700,700,300,300,150,colors,labels,500,100)
   );
     _("box1").appendChild(panit_svg1(date,700,700,300,300,150,colors,labels,500,100)
   );
   */
   /**
	*方法: panit_svg2(date,width,height,cx,cy,r,colors,labels,rx,ry)
	*用途：用于绘制圆形统计图在标签后加上了百分比
	*参数：date： 
	*      width：height：面板大小
	*      cx：  cy：    重点所在处    r： 统计图半径
	*      colors：   
	*      labels：    
	*      rx： ry：  起始位置
	*特殊情况1:  
	*/
   function panit_svg2(date,width,height,cx,cy,r,colors,labels,rx,ry){
	  var svgns = "http://www.w3.org/2000/svg";
      var e=document.createElementNS(svgns,"svg:svg");
	  e.setAttribute("width",width);
	  e.setAttribute("height",height);
	  e.setAttribute("viewBox","0 0 "+width+" "+height);
	  //记录date的总值
	  var total=0;
	  for(var i=0; i < date.length; i++)total=total+date[i];

	  //计算各个块区所占的度
	  var angle=[] //定义一个空数组
	  var percent=[]
	  for (var i=0; i < date.length; i++) 
	   {
		   angle[i]=date[i]/total*Math.PI*2;
		   percent[i]=(date[i]/total).toFixed(2);
	   }
	  
	  //遍历每一个区块
	  var startangle = 0;  //初始度数
	  for(var i=0; i < date.length;i++){
         var endangle = startangle+angle[i];//结尾的度数
		 //计算起始和结尾两点的坐标
		 var x1=cx+Math.sin(startangle)*r;
		 var y1=cy-Math.cos(startangle)*r;
		 var x2=cx+Math.sin(endangle)*r;
		 var y2=cy-Math.cos(endangle)*r;
		 //使用svg：path绘制区块
		 var path=document.createElementNS(svgns,"path");
         var big=0;
		 if((endangle-startangle)>Math.PI) big=1;
		 //编辑路径信息
		 var d = "M " + cx + "," + cy +  //圆心
		      " L " + x1 + "," +y1 +
			  " A " + r + "," + r +
			  " 0 " + big + "1" +
			  x2 + "," + y2 +
			  " Z";
		//设置属性
		path.setAttribute("stroke-width","0.2");
		path.setAttribute("d",d);
		path.setAttribute("fill",colors[i]);
        path.setAttribute("stroke","black");
		
		e.appendChild(path);

		//设置下一个开始的起始角度
		startangle=endangle;

		//绘制区块图例名称
        var ico=document.createElementNS(svgns,"rect");
		ico.setAttribute("x",rx);
		ico.setAttribute("y",ry+30*i);
		ico.setAttribute("width",20);
		ico.setAttribute("height",20);
		ico.setAttribute("fill",colors[i]);
		ico.setAttribute("stroke","black");
		ico.setAttribute("stroke-width","2");
		e.appendChild(ico);

		//在区块图例右边添加标签
		var label=document.createElementNS(svgns,"text");
		label.setAttribute("x",rx + 30);
		label.setAttribute("y",ry + i*30+18);
		label.setAttribute("font-size","16");
		label.setAttribute("font-family","sans-serif");
		label.appendChild(document.createTextNode(labels[i]+" "+percent[i]*100+"%"));  //添加一个文本节点
		e.appendChild(label);
	  }
	  return e;
   }
  </script>
 </body>
</html>
